<template>
  <div class="common-category">
    <div class="common-category__menu">
      <CommonCategoryItem
        label="医学常识"
        value="1"
        :index="0"
        :active="active === '1'"
        @select="onSelect"
      />

      <CommonCategoryItem
        label="科普知识"
        value="12"
        :index="1"
        :active="active === '12'"
        @select="onSelect"
      />
    </div>
    <div class="common-category__subMenu">
      <CommonCategorySubMenu />
    </div>
    <div class="common-category__content"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonCategoryItem from "./common-category-item.vue";
import CommonCategorySubMenu from "./common-category-subMenu.vue";

defineOptions({
  name: "custom-category",
});

const active = ref("1");

const onSelect = (value: string) => {
  if (active.value !== value) {
    active.value = value;
  }
};
</script>

<style lang="less">
.common-category {
  width: 100%;
  &__menu {
    width: 100%;
    display: flex;
    align-items: flex-end;
  }
  &__subMenu {
    // padding: 20px 30px;
    background-color: white;
  }
  &__content {
    width: 100%;
    height: 300px;
    background: #fff;
  }
}
</style>
